<template>
  <van-cell center title="心动模式">
    <template #right-icon>
      <van-switch v-model="isMatchMode" />
    </template>
  </van-cell>

  <user-card-list :user-list="userList" :loading="loading" />
  <van-empty v-if="!userList || userList.length < 1" description="数据为空" />
</template>
  
<script setup lang="ts">
import { ref, watchEffect } from "vue";
import myAxios from "../plugins/myAxios";
import { showToast } from "vant";
import UserCardList from "../components/UserCardList.vue";
import { userType } from "../models/user";

const isMatchMode = ref<boolean>(false);

const userList = ref([]);
const loading = ref(true);

const loadData = async () => {
  let userListDate = [];
  loading.value = true;
    //心动模式，根据标签匹配用户
  if (isMatchMode.value) {
    const num = 10;
    userListDate = await myAxios
      .get("/user/match", {
        params: {
          num,
        },
      })
      .then(function (response) {
        console.log("/user/match", response);
        showToast("请求成功");
        // console.log(response);
        return response?.data;
      })
      .catch(function (error) {
        console.error("/user/match", error);
        showToast("请求失败");
      });
  } else {
    //普通模式，直接通过分页查询
    // 上面的请求也可以这样做
    userListDate = await myAxios
      .get("/user/recommend", {
        params: {
          pageSize: 8,
          pageNum: 1,
        },
      })
      .then(function (response) {
        console.log("/user/recommend", response);
        showToast("请求成功");
        // console.log(response);
        return response?.data?.records;
      })
      .catch(function (error) {
        console.error("/user/recommend", error);
        showToast("请求失败");
      });
  }
      // console.log(userListDate);
      if (userListDate) {
      userListDate.forEach((user:userType) => {
        if (user.tags) {
          user.tags = JSON.parse(user.tags);
        }
      });
      userList.value = userListDate;
    }
    loading.value = false;
}

watchEffect(() => {
  loadData();
});


</script>
<style>
</style>